<template>

  <div v-if="null != userList &&  userList.length > 0">
    <van-card v-for="user in userList"
              :price="user.planetCode"
              :desc="user.personalProfile"
              :title="`${user.username}<${user.planetCode}>`"
              :thumb="user.avatarUrl"
              currency=""
              :tag="user.gender === 0 ? '♂' : '♀'"
    >
      <template #tags>
        <van-tag  type="success" plain v-for="tag in user.tags" style="margin-right: 8px;margin-top: 4px">
          {{tag}}
        </van-tag>
      </template>
      <template #footer>
        <van-button size="mini" @click="toUserInfo(user)">联系我</van-button>
      </template>
    </van-card>
  </div>

  <van-empty image="search" description="暂无用户" v-if="(userList.length < 1 || !userList) && !isLoading" />
  <van-loading  vertical v-if="isLoading">
    <template #icon>
      <van-icon name="star-o" size="30" />
    </template>
    加载中...
  </van-loading>

</template>

<script setup lang="ts">

import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {getUsersByTags, selectUserByAccount} from '../api/userApi.ts';
import {tagStore} from "../stores/tag/tag.ts";
import {searchStore} from "../stores/search/search.ts";
import {userStore} from "../stores/user/user.ts";


const route = useRoute();
const router = useRouter();
const searchStoreAPI = searchStore();
const userStoreAPI = userStore();

const userList = ref([]);
const isLoading = ref(true);



//前往用戶信息页面
const toUserInfo = (user:any)=>{
  userStoreAPI.setOtherUserInfo(user);
  router.push('/userInfo');
};



//钩子函数
onMounted( async ()=>{
  const searchAccount = searchStoreAPI.getSearchAccount();
  //查询用户
  const res = await selectUserByAccount(searchAccount);
  if(200 == res.code){
    //判断数据是否为null
    if (res.data != null){
      userList.value = res.data;
      userList.value.forEach(user =>{
        if (user.tags){
          user.tags = JSON.parse(user.tags);
        }
      });
      isLoading.value = false;
    }
  }
});



</script>


<style scoped>

</style>